<template>
	<view class="application">
		<!-- 头部吸顶 -->
		<Ceiling :navHeight='navHeight' :navTitle='navTitle'></Ceiling>
	    <!-- 伪盒子 称高 -->
	    <view class="box"></view>
		<!-- 小卡片 -->
		<view class="cart">
			<u-row>
			    <u-col span="6">
					<view class="demo-layout bg-purple-light">
						<view class="cart-left" style="margin-right: 20rpx;">
							<view class="cart-left-img">
								<image src="../../static/imgs/appgirl.png" mode="aspectFit"></image>
							</view>
							<view class="cart-left-text">
								<text class="text-top">待办事项</text>
								<text class="text-bottom">我收藏的应用</text>
							</view>
						</view>
					</view>
			    </u-col>
			    <u-col span="6">
			        <view class="demo-layout bg-purple">
						<view class="cart-right" style="margin-left: 20rpx;">
							<view class="cart-right-img">
								<image src="../../static/imgs/appboy.png" mode="aspectFit"></image>
							</view>
							<view class="cart-right-text">
								<text class="text-top">办事指南</text>
								<text class="text-bottom">办事指南汇总</text>
							</view>
							
						</view>
					</view>
			    </u-col>
			</u-row>
		</view>
		<!-- 推荐应用 -->
		<view class="recommended">
			<view class="recommended-title">
				<text>推荐应用</text>
			</view>
			<view class="recommended-description">
				<text>根据您最近浏览和办理应用为您推荐</text>	
			</view>
			<view class="recommended-content">
				<recommendedItem v-for="(item,index) in recommendedArr" :key="index" :recommendeItem='item'></recommendedItem>
			</view>	
		</view>
		<!-- 四个小标题 -->
		<view class="fourTitle">
			<view class="new-titleList">
			    <view  v-for="(item,index) in fourTitleArr" :key="index" class="new-titleList-item" :class="titleIndex===index ? 'active-new-title':''" @click="getNewItem(index)"><text>{{item}}</text></view>
			</view>
		</view>
		<!-- tabList 最新上线-->
		<view class="tabList-new">
			<tabList :tabListArr='tabListArr'></tabList>
		</view>
		<!-- tabList 最新上线电子教务 -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 吸顶标题
				navTitle:'应用',
				navHeight:0,
				//推荐新闻数据数组
				recommendedArr:[
					{
						title:'成绩查询',
						img:'../../static/imgs/grades.svg',
						description:'查询当前及历史成绩',
						bgColor:'#1ed395',
						look:'200+'
					},
					{
						title:'图书借阅',
						img:'../../static/imgs/books.svg',
						description:'查看图书借阅记录',
						bgColor:'#fe9716',
						look:'100+'
					},
					{
						title:'网上查询',
						img:'../../static/imgs/money.svg',
						description:'自助网上缴费',
						bgColor:'#239ee6',
						look:'150+'
					},
					{
						title:'学校预警',
						img:'../../static/imgs/danger.svg',
						description:'查看学院预警信息',
						bgColor:'#c4423a',
						look:'200+'
					},
				],	
				//头部索引
				titleIndex:0,
				//头部最新数据数组
				fourTitleArr:['最新上线','电子商务','教学服务','科研服务'],
				//tabList
				tabListArr:[
					{
						title:'最新上线',
						newList:[
							{
								text:'学校概况',
								img:'../../static/imgs/appimgs/school.png'
							},
							{
								text:'学校地图',
								img:'../../static/imgs/appimgs/map.png'
							},
							{
								text:'我的消费',
								img:'../../static/imgs/appimgs/money.png'
							},
							{
								text:'电子邮件',
								img:'../../static/imgs/appimgs/email.png'
							},
							{
								text:'图书借阅',
								img:'../../static/imgs/appimgs/libray.png'
							},
							{
								text:'获奖成果',
								img:'../../static/imgs/appimgs/jiangbei.png'
							},
							{
								text:'我的党建',
								img:'../../static/imgs/appimgs/red.png'
							},
							{
								text:'网上审批',
								img:'../../static/imgs/appimgs/shenpi.png'
							},
						]
					},
					{
						title:'电子教务',
						newList:[
							{
								text:'',
								img:'../../static/imgs/appimgs/qy.png'
							},
							{
								text:'',
								img:'../../static/imgs/appimgs/book.png'
							},
							{
								text:'',
								img:'../../static/imgs/appimgs/xh.png'
							},
							{
								text:'',
								img:'../../static/imgs/appimgs/fz.png'
							},
						]
					}
					
				]
				
			
			}
		},
		methods: {
			getNewItem(index){
				this.titleIndex = index
			}
		},
		onShow() {
			//获取导航栏的高度
			let h = uni.getSystemInfoSync().statusBarHeight 
			this.navHeight = h
		}
	}
</script>

<style scoped lang="scss">
.application{
	padding: 0 40rpx;
	box-sizing: border-box;
}
.box{
	height: 210rpx;
}
.cart{
	height: 170rpx;
	
	.cart-left{
		padding: 60rpx 44rpx 60rpx 0;
		box-sizing: border-box;
		position: relative;
		height: 170rpx;
		background-image: url('../../static/imgs/bgright.png');
		background-repeat: no-repeat;
		background-size: 100%;
		overflow: hidden;
		
		.cart-left-text{
			display: flex;
			flex-direction: column;
			text-align: right;
			
			.text-top{
				font-size: 20rpx;
				margin-bottom: 10rpx;
				color: #fff;
			}
			.text-bottom{
				font-size: 16rpx;
				color: #fff;
			}
		}
		
		image{
			width: 250rpx;
			height: 250rpx;
			position: absolute;
			top: 40rpx;
			left: -50rpx;
		}
	}
	.cart-right{
		padding: 60rpx 44rpx 60rpx 0;
		box-sizing: border-box;
		position: relative;
		height: 170rpx;
		background-image: url('../../static/imgs/bgleft.png');
		background-repeat: no-repeat;
		background-size: 100%;
		overflow: hidden;
		
		.cart-right-text{
			display: flex;
			flex-direction: column;
			text-align: right;
			
			.text-top{
				margin-bottom: 10rpx;
				font-size: 20rpx;
				color: #fff;
			}
			.text-bottom{
				font-size: 16rpx;
				color: #fff;
			}
		}
		
		image{
			position: absolute;
			width: 156rpx;
			width: 156rpx;
			top:-120rpx;
			left: 0rpx;
		}
	}
}



.recommended{
	margin-top: 60rpx;
		// margin-bottom: 50rpx;
		.recommended-title{
			margin-bottom: 15rpx;
			
			text{
				font-size: 36rpx;
				font-weight: 700;
				font-family: PingFangSC;
			}
		}
		.recommended-description{
			text{
				font-size: 24rpx;
				color: #868686;
		  }
		}
		.recommended-content{
			display: flex;
			overflow-x: scroll;
			gap: 10rpx;
		}
   }
   
   
   .fourTitle{
	   margin-top: 40rpx;
	   
	   .new-titleList{
	   	   display: flex;
	   	   align-items: center;
	   	   gap: 20rpx;
	   	   
	   	   .new-titleList-item{
	   		   text{
	   			   font-size: 28rpx;
	   			   font-weight: 600;
	   		   }
	   	   }
	   }
   }
   
   .active-new-title{
   	   font-weight: 600;
   	   border-bottom: 2px solid #03e391;
   	   margin-bottom: 10rpx;
   	   
   	   text{
   		   font-size: 36rpx !important;
   	   }
   	   
   }



.tabList-new{
	margin-top: 60rpx;
}

</style>
